<template>
    <div>
        <el-tag 
        v-for="item in tags"
        :key="item.path"
        :closable="item.name !== 'home'"
        @close="handleClose(item)"
        @click="handleClick(item)"
        :effect="$route.name === item.name?'dark' : 'plain'">
            {{ item.label }}
        </el-tag>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    computed: {
        ...mapState({
            tags:state=>state.tab.tabList
        })
    },
    methods: {
        ...mapActions(['clickMenu', 'deleteMenu']),
        handleClose(item_tag){
            console.log('close',item_tag)
            let length = this.tags.length
            const index = this.tags.findIndex(item=>item.name===item_tag.name)
            this.deleteMenu(index)
            if(index === length-1){
                console.log('last', this.tags)
                this.$router.push(this.tags[length-2].name)
            }
        },
        handleClick(item_tag){
            console.log('clcik',item_tag)
            if(this.$route.path !==item_tag.path && !(this.$route.path === '/home' && item_tag.path==='/')){
                this.$router.push(item_tag.path)
            }
            this.clickMenu(item_tag)
        }
    },
}
</script>

<style lang="less" scoped>
.el-tag{
    margin-top: 10px;
    margin-left: 10px;
}
</style>